<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <title>登录页</title>
</head>
<body class="whiteBg">
<div class="loginBox">
    <!--logo-->
    <div class="logo"><img src="images/logo.png" alt=""/></div>
    <!--form-->
    <form>
        <div>
            <i class="icon iconfont icon-xingmingyonghumingnicheng"></i>
            <input class="nameInput" type="text" placeholder="请输入您的会员号"/>
        </div>
        <div>
            <i class="icon iconfont icon-ziyuan"></i>
            <input class="tellInput" type="text" placeholder="请输入您的预留手机号"/>
            <button class="btnSendCode" type="button">获取验证码</button>
        </div>
        <div>
            <input class="codeInput" type="text" placeholder="请输入验证码"/>
        </div>
        <button type="button" class="loginBtn">登录</button>
    </form>
    <!--help-->
    <a href="#" class="helpBox">
        <span>帮助中心</span>
    </a>
</div>
<script type="text/javascript" src="js/main.js"></script>
<script>
    $(function(){
        /*验证码倒计时*/
        $(".btnSendCode").on("click",function(){
            if(!$(".tellInput").val().match(/^1[3|4|5|7|8]\d{9}$/)){
                error('请输入正确的手机号');
                return false;

            }else{
                var wait = 10;
                error('验证码已发送');
                time(wait, $('.btnSendCode'));
                $('.btnSendCode').unbind('click');
            }
        });
        //登录
        $(".loginBtn").on("click",function(){
            var name = $(".nameInput").val();
            var phone = $(".tellInput").val();
            var code = $(".codeInpute").val();
            if(name == ""){
                error('姓名不能为空');
            } else if(phone == ""){
                error('手机号不能为空');
            } else if(!phone.match(/^1[3|4|5|7|8]\d{9}$/)){
                error('请输入正确的手机号');
            } else if(code == ""){
                error('验证码不能为空');
            } else{

            }
        })
    });

    /*发送验证码倒计时*/
    function time(wait, o) {
        if (wait == 0) {
            o.removeAttr("disabled");
            o.html("获取验证码");
            wait = 10;
            $('.code_button').on('click', function() {
                time(wait, $('.code_button'));
                $('.code_button').unbind('click');
            });
        } else {
            o.attr("disabled", true);
            o.html("等待" + wait + "秒");
            wait--;
            setTimeout(function() {
                        time(wait, o);
                    },
                    1000)
        }
    }
</script>
</body>
</html>